<template>
    <div :style="DefauleStyle">
        <slot></slot>
    </div>
</template>
<script>
export default {
    props:{
        styles:{
            type:Object
        }
    },
   computed: {
       activeHegiht(){//动态计算中间容器的高度
        // document.documentElement是整个文档节点树的根节点，在网页中即html标签；
            var docEl = document.documentElement;//声明变量 获取HTML根元素
            var clientHeight = docEl.clientHeight;//获取根元素的高度
            if(!clientHeight) return;//容错判断
            var clientWidth = docEl.clientWidth;//获取根元素的宽度
            if(!clientWidth) return;//容错判断
            var fontSize = 20*(clientWidth / 320);//计算出1rem等于多少
            if(this.$route.meta.isShowNav){//要先判断页面中有没有导航栏。
            // 当有导航栏时，根元素的高度要减去导航栏的高度
                clientHeight-=3.2*fontSize;
            }
            if(this.$route.meta.isShowTab){//要先判断页面中有没有tabbar栏。
            // 当有tabbar时，根元素的高度要减去tabbar栏的高度
                clientHeight-=3.2*fontSize;
            }
           return clientHeight/fontSize+"rem";
       },
       DefauleStyle(){//动态添加样式
           return {
                // 中间容器是否有margin-top属性值：由导航栏是否显示决定的；
                // 当有导航栏，margin-top=3.2rem（64px）
                // 当没有导航栏，margin-top=0px
               marginTop:this.$route.meta.isShowNav?'3.2rem':'0px',
               // 中间容器是否有margin-bottom属性值：由tabbar栏是否显示决定的；
                // 当有tabbar栏，margin-bottom=3.2rem（64px）
                // 当没有tabbar栏，margin-bottom=0px
               marginBottom:this.$route.meta.isShowTab?'3.2rem':'0px',
               height:this.activeHegiht,//动态获取元素的高度
               width:100+"%",//元素的宽度
               ...this.styles
           }
       }
   }, 
}
</script>
<style lang="scss" scoped>

</style>